import { Component } from "inferno";
import ring from "./media/ring.ogg";

class CallScreen extends Component {
  handleKeyDown = (evt) => {
    if (evt.key === "Call" && this.state.callState === null) {
      this.call.answer();
    }
  };

  rejectCall = () => {
    this.call.reject();
  };

  answerCall = () => {
    this.call.answer().then(() => {
      let audio = new Audio();
      audio.mozAudioChannelType = "telephony";
      this.call.setRemoteAudioElement(audio);
    });
  };

  constructor(props) {
    super(props);
    const { softKeyRef, avatarSrc, name, call, callEndCb, incoming } = props;
    this.softKeyRef = softKeyRef;
    this.avatarSrc = avatarSrc;
    this.name = name;
    this.call = call;
    this.callEndCb = callEndCb;
    this.ring = new Audio(ring);
    this.ring.loop = true;
    this.state = { callState: incoming ? "ringing" : null };
  }

  componentDidMount() {
    document.addEventListener("keydown", this.handleKeyDown);
    this.call.on("state", (state) => {
      this.setState({ callState: state });
    });
    this.call.on("error", (err) => {
      console.log("Call Error", err);
      this.callEndCb(err);
    });
  }

  componentWillUnmount() {
    document.removeEventListener("keydown", this.handleKeyDown);
    this.ring.pause();
  }

  render() {
    this.ring.pause();
    switch (this.state.callState) {
      case "connected":
        this.softKeyRef.current.setState({
          centerText: "End",
          leftText: "(Un)mute",
          rightText: "",
        });
        this.softKeyRef.current.centerCb = () => this.call.hangup("", true);
        this.softKeyRef.current.leftCb = () =>
          this.call.setMicrophoneMuted(!this.call.isMicrophoneMuted());
        this.softKeyRef.current.rightCb = () => {};
        break;
      case "ringing":
        this.softKeyRef.current.setState({
          centerText: "Reject",
          leftText: "Answer",
          rightText: "",
        });
        this.softKeyRef.current.centerCb = this.rejectCall;
        this.softKeyRef.current.rightCb = () => {};
        this.softKeyRef.current.leftCb = this.answerCall;
        this.ring.play();
        break;
      case "ended":
        this.callEndCb(null);
        break;
      default:
        this.softKeyRef.current.setState({
          centerText: "",
          leftText: "",
          rightText: "",
        });
        this.softKeyRef.current.centerCb = () => {};
        this.softKeyRef.current.rightCb = () => {};
        this.softKeyRef.current.leftCb = () => {};
        break;
    }
    return (
      <div
        style={{
          height: "calc(100vh - 5.8rem)",
          display: "flex",
          "flex-direction": "column",
          "justify-content": "center",
          "align-content": "center",
        }}
        $HasNonKeyedChildren
      >
        <img
          style={{ height: "128px", width: "128px", border: "50%" }}
          src={this.avatarSrc}
          alt=""
        />
        <h5>{this.state.callState}</h5>
        <h2>{this.name}</h2>
      </div>
    );
  }
}

export default CallScreen;
